<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--&lt;!&ndash;    引入网页标签图标&ndash;&gt;-->
<!--    <link rel="icon" href="{{ url_for('static', filename='favicon.gif') }}">-->
<!--&lt;!&ndash;    引入css样式&ndash;&gt;-->
<!--    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" type="text/css">-->
<!--    <title>{{name}}‘s watch list</title>-->
<!--</head>-->
<!--<body>-->
<!--    <h2>{{ user.name }}'s Watchlist</h2>-->
<!--    {# 使用 length 过滤器获取 movies 变量的长度 #}-->
<!--    <p>{{ movies|length }} Titles</p>-->
<!--&lt;!&ndash;    引入保存在static中的图片&ndash;&gt;-->
<!--    <h2>-->
<!--    <img alt="Avatar" class="avator" src="{{ url_for('static', filename='images/avatar.png') }}">-->
<!--    {{ user.name }}'s Watchlist-->
<!--    </h2>-->

<!--    <ul class="movie-list">-->
<!--        {% for movie in movies %}  {# 迭代 movies 变量 #}-->
<!--        <li>{{ movie.title }} - {{ movie.year }}</li>  {# 等同于 movie['title'] #}-->
<!--        {% endfor %}  {# 使用 endfor 标签结束 for 语句 #}-->
<!--    </ul>-->
<!--    <footer>-->
<!--        <small>&copy; 2018 <a href="http://helloflask.com/tutorial">HelloFlask</a></small>-->
<!--        <img alt="Walking Totoro" class="totoro" src="{{ url_for('static', filename='images/totoro.gif') }}">-->
<!--    </footer>-->
<!--</body>-->
<!--</html>-->

<!--继承基模板的主页模板-->
<!--extends 标签声明扩展自模板 base.html，可以理解成“这个模板继承自 base.html“。-->
{% extends 'base.html' %}
<!--定义了 content 块，这里的内容会插入到基模板中 content 块的位置-->
{% block content %}
<p>{{ movies|length }} Titles</p>
<ul class="movie-list">
    {% for movie in movies %}
    <li>{{ movie.title }} - {{ movie.year }}
<!--每一个电影条目右侧添加了一个 IMDb 链接-->
        <span class="float-right">
            <!--在模板渲染时，会先判断当前用户的登录状态-->
            {% if current_user.is_authenticated %}
            <a class="imdb" href="https://movie.douban.com/subject_search?search_text={{ movie.title }}" target="_blank" title="Find this movie on IMDb">豆瓣搜索</a>
            <a class="btn" href="{{ url_for('edit', movie_id=movie.id) }}">更新</a>
            <form class="inline-form" method="post" action="{{ url_for('delete', movie_id=movie.id) }}">
                <input class="btn" type="submit" name="delete" value="Delete" onclick="return confirm('Are you sure?')">
            </form>
            {%endif%}
        </span>
    </li>
    {% endfor %}
</ul>
<!--在模板渲染时，会先判断当前用户的登录状态-->
{% if current_user.is_authenticated %}
<!--在 <form> 标签里使用 method 属性将提交表单数据的 HTTP 请求方法指定为 POST。
如果不指定，则会默认使用 GET 方法，这会将表单数据通过 URL 提交，容易导致数据泄露，-->
<form method="post">
<!--    autocomplete 属性设为 off 来关闭自动完成（按下输入框不显示历史输入记录）；
另外还添加了 required 标志属性，如果用户没有输入内容就按下了提交按钮，浏览器会显示错误提示。-->
    Name <input type="text" name="title" autocomplete="off" required>
    Year <input type="text" name="year" autocomplete="off" required>
<!--    默认情况下，当表单中的提交按钮被按下，浏览器会创建一个新的请求，默认发往当前 URL
（在 <form> 元素使用 action 属性可以自定义目标 URL）。-->
    <input class="btn" type="submit" name="submit" value="Add">
</form>
{%endif%}
<img alt="Walking Totoro" class="totoro" src="{{ url_for('static', filename='images/totoro.gif') }}" title="to~to~ro~">
{% endblock %}